<template>
  <div class="app-container">
    <div class="bg_fff mb_12 pl_14">
      <breadcrumb />
    </div>
    <ul class="tablist">
      <li :class="active==0?`active`:``" @click="getActive(0)">流量主管理</li>
      <li :class="active==1?`active`:``" @click="getActive(1)">历史结算单</li>
    </ul>
     <!--    流量主管理页面-->
    <trafficMasterMgt v-if="active==0"></trafficMasterMgt>
    <historicalSettlementList v-if="active==1"></historicalSettlementList>
  </div>
</template>
<script>
import trafficMasterMgt from './trafficMasterMgt.vue';
import historicalSettlementList from './historicalSettlementList'
//流量主管理
export default {
  name: "index",
  components:{
    trafficMasterMgt,
    historicalSettlementList,
  },
  data() {
    return {
      active:0,//选择
    };
  },
  created() {
  },
  watch: {
  },
  mounted() {
  },

  methods: {
    getActive(index){
      this.active=index;
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .tablist {
    display: flex;
    padding: 0px;
    margin: 0px;
    margin-bottom: 10px;
    font-size: 14px;

    li {
      width: 105px;
      height: 30px;
      border: 1px solid #1670F1;
      color: #1670F1;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      cursor: pointer;
      &.active {
        background-color: #1670F1;
        color: #fff;
      }
    }
  }
}

</style>
